<template>
  <div class="error-page">
    <div class="error-container">
      <!-- 左侧插画区域 -->
      <div class="illustration-section">
        <div class="illustration-wrapper">
          <!-- 主要人物 -->
          <div class="character">
            <div class="character-body">
              <div class="head"></div>
              <div class="body"></div>
              <div class="arm-left"></div>
              <div class="arm-right"></div>
              <div class="legs"></div>
            </div>
            <!-- 手中的盒子 -->
            <div class="code-box">
              <span class="code-symbol">&lt;/&gt;</span>
            </div>
          </div>
          
          <!-- 背景装饰 -->
          <div class="bg-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
            <div class="shape shape-4"></div>
            <div class="shape shape-5"></div>
          </div>
          
          <!-- 问号图标 -->
          <div class="question-mark">
            <span>?</span>
          </div>
          
          <!-- 植物装饰 -->
          <div class="plant">
            <div class="pot"></div>
            <div class="cactus">
              <div class="segment segment-1"></div>
              <div class="segment segment-2"></div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧内容区域 -->
      <div class="content-section">
        <div class="error-code">404</div>
        <div class="error-message">抱歉，你访问的页面不存在</div>
        <div class="error-description">
          页面可能已被删除、重命名或暂时不可用
        </div>
        <div class="action-buttons">
          <el-button type="primary" @click="goHome" class="home-btn">
            <el-icon><House /></el-icon>
            返回首页
          </el-button>
          <el-button @click="goBack" class="back-btn">
            <el-icon><Back /></el-icon>
            返回上页
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { House, Back } from '@element-plus/icons-vue';

const router = useRouter();

const goHome = () => {
  router.push('/dashboard');
};

const goBack = () => {
  router.go(-1);
};
</script>

<style lang="scss" scoped>
.error-page {
  height: calc(100vh - 160px);
  background: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.error-container {
  max-width: 1000px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* 左侧插画区域 */
.illustration-section {
  position: relative;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.illustration-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 主要人物 */
.character {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.character-body {
  position: relative;
  width: 80px;
  height: 120px;
}

.head {
  width: 40px;
  height: 40px;
  background: #2c3e50;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.body {
  width: 50px;
  height: 40px;
  background: #ffffff;
  border-radius: 8px;
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid #e0e0e0;
}

.arm-left {
  width: 15px;
  height: 30px;
  background: #ffffff;
  border-radius: 8px;
  position: absolute;
  top: 40px;
  left: 15px;
  border: 2px solid #e0e0e0;
}

.arm-right {
  width: 15px;
  height: 30px;
  background: #ffffff;
  border-radius: 8px;
  position: absolute;
  top: 40px;
  right: 15px;
  border: 2px solid #e0e0e0;
}

.legs {
  width: 20px;
  height: 40px;
  background: #3498db;
  border-radius: 8px;
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
}

/* 手中的代码盒子 */
.code-box {
  position: absolute;
  top: 45px;
  left: -25px;
  width: 30px;
  height: 20px;
  background: #d4a574;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #c19a6b;
}

.code-symbol {
  font-size: 12px;
  font-weight: bold;
  color: #8b4513;
  font-family: 'Courier New', monospace;
}

/* 背景装饰形状 */
.bg-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.shape {
  position: absolute;
  background: #e3f2fd;
  border-radius: 50%;
}

.shape-1 {
  width: 60px;
  height: 60px;
  top: 20%;
  left: 10%;
  animation: float 3s ease-in-out infinite;
}

.shape-2 {
  width: 40px;
  height: 40px;
  top: 60%;
  left: 20%;
  animation: float 3s ease-in-out infinite 0.5s;
}

.shape-3 {
  width: 80px;
  height: 80px;
  top: 30%;
  right: 15%;
  animation: float 3s ease-in-out infinite 1s;
}

.shape-4 {
  width: 30px;
  height: 30px;
  top: 70%;
  right: 25%;
  animation: float 3s ease-in-out infinite 1.5s;
}

.shape-5 {
  width: 50px;
  height: 50px;
  top: 10%;
  right: 30%;
  animation: float 3s ease-in-out infinite 2s;
}

/* 问号图标 */
.question-mark {
  position: absolute;
  top: 15%;
  right: 20%;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #3498db, #2980b9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.question-mark span {
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
}

/* 植物装饰 */
.plant {
  position: absolute;
  bottom: 10%;
  right: 10%;
  z-index: 2;
}

.pot {
  width: 25px;
  height: 20px;
  background: #d4a574;
  border-radius: 4px;
  border: 2px solid #c19a6b;
}

.cactus {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}

.segment {
  width: 15px;
  height: 20px;
  background: #27ae60;
  border-radius: 8px;
  margin-bottom: 2px;
}

.segment-1 {
  width: 12px;
}

.segment-2 {
  width: 18px;
}

/* 右侧内容区域 */
.content-section {
  padding-left: 20px;
}

.error-code {
  font-size: 120px;
  font-weight: 900;
  color: #2c3e50;
  line-height: 1;
  margin-bottom: 20px;
  letter-spacing: -2px;
}

.error-message {
  font-size: 24px;
  font-weight: 600;
  color: #34495e;
  margin-bottom: 12px;
  line-height: 1.3;
}

.error-description {
  font-size: 16px;
  color: #7f8c8d;
  margin-bottom: 40px;
  line-height: 1.5;
}

.action-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.home-btn {
  background: #3498db;
  border-color: #3498db;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.home-btn:hover {
  background: #2980b9;
  border-color: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.back-btn {
  background: #ffffff;
  border-color: #bdc3c7;
  color: #7f8c8d;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: #ecf0f1;
  border-color: #95a5a6;
  color: #2c3e50;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .error-container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  
  .illustration-section {
    height: 280px;
  }
  
  .content-section {
    padding-left: 0;
  }
  
  .error-code {
    font-size: 80px;
  }
  
  .error-message {
    font-size: 20px;
  }
  
  .action-buttons {
    justify-content: center;
  }
  
  .action-buttons .el-button {
    flex: 1;
    min-width: 140px;
  }
}

@media (max-width: 480px) {
  .error-page {
    padding: 20px 16px;
  }
  
  .illustration-section {
    height: 220px;
  }
  
  .error-code {
    font-size: 60px;
  }
  
  .error-message {
    font-size: 18px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
</style>